<template>
  <div>
    <div class="box">
      <div class="title" style="margin-bottom:1%;">资产统计</div>
      <div class="numbox">
        <div class="anno">{{annotation}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="price">¥{{price}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="numbox-date">更新时间:2019.03.07</div>
      </div>
      <div class="numbox">
        <div class="anno">{{annotation}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="price">¥{{price}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="numbox-date">更新时间:2019.03.07</div>
      </div>
      <div class="numbox">
        <div class="anno">{{annotation}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="price">¥{{price}}</div>
        <hr style="border:0.5px dashed;" />
        <div class="numbox-date">更新时间:2019.03.07</div>
      </div>
    </div>
    
    <div class="box">
      <div class="title" style="margin-bottom:4px;">现有资产列表</div>
       <div style="margin:15px 0;">
        <el-button type="primary" plain @click="handleOpenAdd()" size="mini">增加员工</el-button>
        <el-button
          type="danger"
          plain
          :disabled="multipleSelection.length === 0"
          @click="handleDeleteSelected(tableData)"
          size="mini"
          style="margin-right:17px;"
        >删除选中的员工</el-button>
        <el-button type="primary" plain @click="show_all()" size="mini" style="margin-right:17px;">展示所有职工</el-button>
        <el-input v-model="search_name_id" width="200px" placeholder="请输入你要查找的姓名或编号" class="small-width" size="mini" style="margin-right:5px;"></el-input>
        <el-button type="primary" plain @click="search_person()" size="mini">查找</el-button>
        
      </div>
      <el-table
        ref="multipleTable"
        :data="tableDatas"
        tooltip-effect="light"
        :stripe="true"
        :row-style="{height:'7px'}"
        :cell-style="{padding:'5px 0'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="470"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="assetid" label="资产ID" width="80"></el-table-column>
        <el-table-column prop="typeid" label="类型ID" width="80"></el-table-column>
        <el-table-column prop="assetname" label="资产名称" width="80"></el-table-column>
        <el-table-column prop="assetstate" label="资产状态" width="80"></el-table-column>
        <el-table-column label="开始使用时间" width="110">
          <template slot-scope="scope">{{ scope.row.begintousetime }}</template>
        </el-table-column>
        <el-table-column prop="number" label="数量" width="80"></el-table-column>
        <el-table-column prop="unitofmeasurement" label="计量单位" width="80"></el-table-column>
        <el-table-column prop="price" label="价格" width="80"></el-table-column>
        <el-table-column label="生产日期" width="110">
          <template slot-scope="scope">{{ scope.row.dateinproducued }}</template>
        </el-table-column>
        <el-table-column prop="servicelifeperiod" label="使用年限" width="80"></el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家" width="80"></el-table-column>
        <el-table-column prop="sourcesofassets" label="资产来源" width="80"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index,tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      annotation: "资产总价格",
      price: "150580",
      editform: {
        assetid: "",
        typeid: "",
        assetname: "",
        assetstate: "",
        begintousetime: "",
        number: "",
        unitofmeasurement: "",
        price: "",
        dateinproducued: "",
        servicelifeperiod: "",
        manufacturer: "",
        sourcesofassets: "",
        saveplace: "",
        thereasonofcleanup: "",
        thedateofcleanup: ""
      },
      tableDatas: [
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        },
        {
          assetid: "115015",
          typeid: "2150",
          assetname: "联想顶级配置PC",
          assetstate: "存库中",
          begintousetime: "2015-10-08",
          number: "50",
          unitofmeasurement: "10台电脑",
          price: "300000",
          dateinproducued: "2015-06-18",
          servicelifeperiod: "8年",
          manufacturer: "联想公司",
          sourcesofassets: "招标方式"
        }
      ]
    };
  },
  methods: {
    handleSelectionChange() {
      return "ds";
    },
    handleOpenAdd(){

    },
    handleDeleteSelected(){

    },
    show_all(){

    },
    search_person(){

    },
    multipleSelection(){
      
    }
  },
  created() {
    this.tableDatas;
  }
};
</script>
<style>
.small-width {
  width: 200px;
}
.numbox {
  color: white;
  background-color: #346399;
  width: 200px;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  border-radius: 10px;
  display: inline-block;
}
.anno {
  font-size: 10px;
  font-weight: bolder;
}
.price {
  font-size: 40px;
  font-weight: bolder;
  text-align: right;
}
.numbox-date {
  text-align: right;
  font-size: 10px;
}
.title {
  font-weight: bold;
  font-size: 20px;
}
.box-card {
  margin-bottom: 1%;
  color: #e3e5e9;
}
</style>